<template>
  <draggable-resizable-vue
    v-model:x="element.x"
    v-model:y="element.y"
    v-model:h="element.height"
    v-model:w="element.width"
    v-model:active="element.isActive"
    :parent="true"
    :resizable="element.isResizeable"
    class-name="poup-wrapper"
    drag-cancel=".poup-body"
    :active-on-hover="true"
    handles-type="borders"
  >
    <div class="poup-header">
      <div class="poup-title" :style="`text-align:${props.titleAlign}`">
        {{ props.title }}
      </div>
      <div class="poup-close" @click="handleColse"></div>
    </div>
    <div class="poup-body">
      <slot></slot>
    </div>
  </draggable-resizable-vue>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import DraggableResizableVue from "draggable-resizable-vue3";
const emit = defineEmits(["close"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  x: {
    type: Number,
    default: 0,
  },
  y: {
    type: Number,
    default: 0,
  },
  width: {
    type: Number,
    default: 200,
  },
  height: {
    type: Number,
    default: 200,
  },
  titleAlign: {
    type: String,
    default: "left",
  },
  isResizeable: {
    type: Boolean,
    default: false,
  },
});

const element = ref({
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  isActive: false,
  isResizeable: false,
});
watch(
  () => {
    props.x, props.y, props.width, props.height, props.isResizeable;
  },
  () => {
    element.value = {
      isActive: false,
      x: props.x,
      y: props.y,
      width: props.width,
      height: props.height,
      isResizeable: props.isResizeable,
    };
  },
  {
    immediate: true,
    deep: true,
  }
);

const handleColse = () => {
  emit("close");
};
</script>
<style lang="less" scoped>
.poup-wrapper {
  background: #ffffff;
  border-radius: 12px 12px 4px 4px;
  position: absolute;
  .poup-header {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid #e6ebf1;
    border-radius: 4px 4px 0 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    position: relative;
    .poup-title {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262626;
      width: 100%;
    }
    .poup-close {
      background: url(@/assets/icon-poup-close.png) no-repeat center;
      width: 16px;
      height: 16px;
      cursor: pointer;
      position: absolute;
      right: 12px;
      top: 14px;
    }
  }
  .poup-body {
    padding: 12px;
    box-sizing: border-box;
    height: calc(100% - 44px);
  }
}
</style>
